<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>文章</title>
    {include file="../application/common/view/index/header_link.html" /}
    <link rel="stylesheet" type="text/css" href="/static/css/article.css" >
</head>
<body>
<div class="container-fluid">
    {include file="../application/common/view/index/header.html" /}
    <div class="main">
        <input id="id" type="hidden" value="{$list.id}">
        <section>
            <div class="main-article">
                <div class="article-head">
                    <div class="main-box main-article-title">
                        <h3><b>{$list.title}</b></h3>
                    </div>
                    <div class="main-box main-article-time">
                        <span>浏览：{$list.browse} 时间：{$list.created_date}</span>
                    </div>
                    <div class="main-box main-article-synopsis">
                        <p><b>简介：</b>{$list.synopsis}</p>
                    </div>
                    <div class="main-box main-article-content">
                        <p>{$list.content}</p>
                    </div>
                    <div class="main-box main-article-bottom">
                        <div class="btn-group" role="group" aria-label="Basic example">
                            <button id="zans" type="button" class="btn btn-info" onclick="CS()" value="{$list.support}">点赞<span id="zan">{$list.support}</span></button>
                            <button type="button" class="btn btn-info">收藏<span></span></button>
                            <button type="button" class="btn btn-info">举报</button>
                            <button type="button" class="btn btn-info">关注</button>
                        </div>
                    </div>
                </div>
                <div class="article-main">
                    <div class="main-article-top">
                        留言：
                    </div>
                    <div class="main-article-message">
                        其他用户留言：
                    </div>
                </div>
                <div class="article-foot">
                    <h4>推荐阅读</h4>
                </div>
            </div>
            <div class="main-aside">
                <div class="main-aside-box">
                    <div class="card">
                        <div class="card-body">
                            <p class="card-text">作者简介</p>
                        </div>
                    </div>
                </div>
                <div class="main-aside-box">
                    <div class="card">
                        <div class="card-body">
                            <p class="card-text">目录树</p>
                        </div>
                    </div>
                </div>
                <div class="main-aside-box">
                    <div class="card">
                        <div class="card-body">
                            <p class="card-text">分类专栏</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
    <!--<footer>页尾</footer>-->
    {include file="../application/common/view/index/footer.html" /}
</div>
</body>
<script type="text/javascript">
    var x=0;
    function CS() {
        x+=1;
        var zan = document.getElementById("zans").value;
        var zans =zan*1; //转化成数字
        var aid=document.getElementById("id").value;
        var id=aid*1;   //文章id转化成数字
        //可以加一层判断当点击10次弹出提示框
        if(x<=10) {
            if ((x%2) == 1){ //奇数点赞
                $.ajax({
                    async:true,
                    type:"POST",
                    url:"/blog/article/zan",
                    data:{id:id,zan:1},
                    dataType:'JSON',
                    contentType: "application/x-www-form-urlencoded; charset=utf-8",
                    success: function (data) {
                        if(data.cid==1){
                            alert("点赞成功");
                        }
                    }
                });
                zans=zans+1;
                document.getElementById("zan").innerText=zans;
            }else{ //取消点赞
                $.ajax({
                    async:true,
                    type:"POST",
                    url:"/blog/article/zan",
                    data:{id:id,zan:2},
                    dataType:'JSON',
                    contentType: "application/x-www-form-urlencoded; charset=utf-8",
                    success: function (data) {
                        if(data.rid==2){
                            alert("取消点赞成功");
                        }
                    }
                });
                document.getElementById("zan").innerText=zans;
            }
        }else{
            alert("点赞次数过多，请勿重复点赞");
        }
    }
</script>
{include file="../application/common/view/index/footer_link.html" /}
</html>